<template>
  <div class="home">
    <Banner />
    <!-- <Navigation /> -->
    <div class="line-space"></div>
    <NewProduct />
    <div class="line-space"></div>
    <PopularArea />
  </div>
</template>

<script>
// @ is an alias to /src
import Banner from './components/banner.vue';
// import Navigation from './components/navigation.vue';
import NewProduct from './components/newProduct.vue';
import PopularArea from './components/popularArea.vue';

export default {
  name: 'Home',
  components: { Banner, NewProduct, PopularArea },
  data() {
    return {
      colors: [
        'indigo',
        'warning',
        'pink darken-2',
        'red lighten-1',
        'deep-purple accent-4'
      ],
      slides: ['First', 'Second', 'Third', 'Fourth', 'Fifth']
    };
  }
};
</script>
